<template>
  <div class="Headerinfo">
    <div class="custom-Headerinfo">
      <img src="static/icon/my_logo@3x.png" style="width: 30px;height: 30px;position: absolute;left: 15px;top:8px"
           alt="logo">
      我的

    </div>
    <scroller :on-refresh="refresh" ref="myscroller">

      <div class="custom-header">
        <div class="custom-header-left">
          <img @click="User.tel?userName():bindPhone()"
               :src="User.avatar?User.avatar:'http://img.zcool.cn/community/01cd055549678e0000019ae9a22564.jpg@1280w_1l_2o_100sh.jpg'"
               alt="头像">
        </div>
        <div class="custom-header-right">
          <div @click="userName">{{User.name}}</div>
          <div @click="User.tel?bindTel():bindPhone()" style="position: relative;padding-left:18px">
            <img src="static/icon/my_icon_phone@3x.png"
                 style="width:15px;height:15px;position: absolute;left: 0px;top: 3px" alt="">
            {{User.tel?User.tel:'绑定电话号码'}}
          </div>
        </div>
      </div>

      <div class="custom-shuang">
        <img style="width: 20px;height: 20px;position: absolute;top: 7px;" src="static/icon/my_icon_notice@3x.png"
             alt="">
        <div style="padding-left: 25px;height: 16px">
          <Marquee :lists="lists" v-if="lists"></Marquee>
        </div>
      </div>

      <div class="custom-money">
        <div style="flex: 1">
          <div>￥{{User.balance}}</div>
          <div style="display: flex">
            <div style="flex: 1;text-align: right;padding:3px 12px 0 0;color: #D4D4D4;font-size:14px" @click="getMoney">
              充值
            </div>
            <div style="flex: 1;text-align: left;padding:3px 0 0 12px;color: #D4D4D4;font-size:14px" @click="detail">明细
            </div>
          </div>
        </div>
        <div class="_hr"></div>
        <div style="flex: 1">
          <div>剩余套餐</div>
          <div style="color: #D4D4D4;font-size:14px;padding: 3px 0 0 0">剩余{{User.setMealRemains}}天</div>
        </div>
      </div>
      <group>
        <cell :title="item.title" is-link v-for="(item,index) in itemlist" :key="index" :link="item.link">
          <img slot="icon" width="20" style="display:block;margin-right:5px;" :src="item.src">
        </cell>
      </group>

      <div v-transfer-dom>
        <confirm
          v-model="showcom"
          :show-cancel-button="false"
          title="提示"
          @on-confirm="onConfirm">
          <p style="text-align:center;">请绑定手机号后充值</p>
        </confirm>
      </div>

    </scroller>
  </div>
</template>

<script type="text/ecmascript-6">
import {Group, Cell, CellBox, Confirm, TransferDom} from 'vux'

import Marquee from './Marquee'
import {UserInfo, Notice} from '@/api/mine'

export default {
  data () {
    return {
      itemlist: [{
        title: '订座记录',
        src: 'static/icon/my_icon_record@3x.png',
        link: '/Mine/SeatRecord'
      }, {
        title: '我的卡券',
        src: 'static/icon/my_icon_card@3x.png',
        link: '/Mine/Coupon'
      }, {
        title: '系统消息',
        src: 'static/icon/my_icon_notice@3x.png',
        link: '/Mine/Message'
      }, {
        title: '联系我们',
        src: 'static/icon/my_icon_contact@3x.png',
        link: '/Mine/ContactUs'
      }],
      showcom: false,
      lists: '',
      User: {}
    }
  },
  created () {
    UserInfo().then(res => {
      let User = res.data.data
      if (User.avatar) {
        User.avatar = `../${User.avatar}`
      }
      this.User = User
    })
    this.Not()
  },
  methods: {
    Not () {
      let _this = this
      Notice().then(res => {
        _this.lists = res.data.data.content
      })
    },
    userName () {
      this.$router.push({
        path: `Mine/UserInfo`
      })
    },
    bindPhone () {
      console.log('11111111')
      this.$router.push({
        path: `Mine/BindPhone`
      })
    },
    bindTel () {
      this.$router.push({
        path: `Mine/BindTel`
      })
    },
    getMoney () {
      if (this.User.tel) {
        this.$router.push({
          path: `Mine/Recharge`
        })
      } else {
        this.showcom = true
      }
    },
    detail () {
      this.$router.push({
        path: `Mine/PayDetail`
      })
    },
    refresh () {
      UserInfo().then(res => {
        this.$refs.myscroller.finishPullToRefresh()
        let User = res.data.data
        if (User.avatar) {
          User.avatar = `../${User.avatar}`
        }
        this.User = User
      })
    },
    onConfirm () {
      this.showcom = false
      this.$router.push({
        path: `Mine/BindPhone`
      })
    }
  },
  components: {
    Group,
    Cell,
    CellBox,
    Confirm,
    Marquee
  },
  directives: {
    TransferDom
  }
}
</script>

<style lang='less' type="text/less">
  .Headerinfo {
    .weui-cell:before {
      border: none;
    }
    .weui-panel {
      margin-top: 0px;
    }
    .weui-cell {
      padding: 12px 15px;
      border-bottom: 1px solid #F0F5F2;
    }
    .vux-cell-bd {
      & > p {
        font-size: 14px;
      }
    }
    .custom-money {
      background-color: #fff;
      display: flex;
      height: 50px;
      padding: 8px;
      text-align: center;
      font-size: 14px;
      border-radius: 50px;
      width: calc(100% - 30px);
      margin: 0 auto;
      box-shadow: 1px 5px 3px #EFF1F0;
      ._hr {
        border-right: 0.5px #1AAD19 solid;
        margin-top: 12px;
        width: 1px;
        height: 24px;
      }

      & > div {
        & > div:first-child {
          color: @common-color;
          font-weight: 600;
        }
      }
    }

    .custom-shuang {
      font-size: 12px;
      color: @common-color;
      padding: 8px 15px;
      position: relative;
    }

    .custom-Headerinfo {
      position: fixed;
      z-index: 10;
      top: 0px;
      height: 42px;
      width: 100%;
      color: #000;
      line-height: 42px;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      background: #fff;
    }

    .custom-header {
      height: 80px;
      display: flex;
      background-color: #fff;
      margin-top: 45px;
      .custom-header-left {
        width: 80px;
        text-align: center;
        line-height: 80px;
        position: relative;
        & > img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: inline-block;
          vertical-align: middle;
        }
      }

      .custom-header-right {
        flex: 1;
        font-size: 14px;
        padding: 22px 6px;

        & > div:first-child {
          font-size: 16px;
          font-weight: 600;
        }

        & > div:last-child {
          color: #717171;
        }
      }
    }
    .weui-cells {
      &:before {
        border: none
      }
    }
    .weui-cells:after {
      border: none;
    }
  }
</style>
